<template>
	<div class="files">
		<el-form :inline="true">
			<!-- 			<el-form-item>
				<el-button-group>
					<el-button type="primary" icon="el-icon-delete" @click="deleteTele" plain>删除</el-button>
				</el-button-group>
			</el-form-item> -->
			<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addTele">新建</el-button>
			<el-button type="primary" icon="el-icon-upload2">导出</el-button>
			<el-button type="primary">发送邮件</el-button>
			<div class="right-items" style="float: right;">
				<el-button icon="el-icon-search" type="primary">搜索</el-button>
			</div>
			<el-form-item class="search">
				<el-input v-model="search" placeholder="输入关键字搜索"></el-input>

			</el-form-item>
		</el-form>
		<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
			<el-table-column type="selection" width="50" />
			<el-table-column type="index" label="序号" align="center" width="50" />
			<el-table-column label="姓名" align="center" prop="name" width="150">
			</el-table-column>
			<el-table-column prop="phone" label="手机号码" align="center" width="200" />
			<el-table-column prop="email" label="电子邮件" align="center" width="250" />
			<el-table-column prop="depart" label="部门" align="center" width="137" />
			<el-table-column prop="tele_type" label="类型" align="center" width="137" />
			<el-table-column prop="company" label="公司" align="center" width="150" />

			<el-table-column label="操作" align="center" width="150px">
				<template slot-scope="scope">
					<el-button size="mini" icon="el-icon-edit" align="center" @click="editStuData(scope.row)">
					</el-button>
					<el-button size="mini" icon="el-icon-delete" align="center" @click="deleteTele(scope.row)"></el-button>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination small layout="total,prev,pager,next,jumper" :total="tableData.length" :page-size="pagesize"
			pager-count="5" :current-page="currentPage" @current-change="handleCurrentChange">
		</el-pagination>


		<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" placeholder="姓名" />
				</el-form-item>
				<el-form-item label="电话号码" prop="phone">
					<el-input type="text" v-model="form.phone" placeholder="电话号码" />
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input type="text" v-model="form.email" placeholder="邮箱" />
				</el-form-item>
				<el-form-item label="部门" prop="depart">
					<el-input type="text" v-model="form.depart" placeholder="部门" />
				</el-form-item>
				<el-form-item label="类型" prop="tele_type">
					<el-input type="text" v-model="form.tele_type" placeholder="类型" />
				</el-form-item>
				<el-form-item label="公司" prop="company">
					<el-input type="text" v-model="form.company" placeholder="公司" />
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveData">保存</el-button>
			</span>
		</el-dialog>
	</div>

</template>

<script>
	import {

		deleteTele,
	} from "../../utils/api";
	import {
		mapState
	} from "vuex";
	//import axios from "axios";

	export default {
		name: "Files",
		data() {

			return {
				form: {
					name: '',
					phone: '',
					email: '',
					depart: '',
					tele_type: '',
					company: ''
				},
				rules: {
					name: [{
						required: true,
						message: ' ',
						trigger: 'blur'
					}],
				},
				tableData: [{
						name: '张三',
						phone: '123456789',
						email: '1620974711@qq.com',
						depart: '销售',
						tele_type: '同事',
						company: ' '
					},
					{
						name: '李四',
						phone: '123456789',
						email: '123@qq.com',
						depart: '后勤',
						tele_type: '同事',
						company: ''
					}],
				pagesize: 10,
				currentPage: 1,

				teles: {},
				files: {
					list: [],
				},
				dialogVisible: false,
				search: "",
				history: [],
				current: [1],
				selection: [],
				path: [" / 根目录"],
				//添加通讯录

			};
		},
		computed: {
			currentPath() {
				return this.path.join(" / ");
			},
			parentId() {
				return this.current[this.current.length - 1];
			},
			...mapState(["auth"]),
		},
		methods: {
			//分页
			handleCurrentChange(val) {
				this.currentPage = val;
			},
			//新建
			addTele() {
				this.dialogVisible = true,
					this.title = '新建通讯信息'
				this.form.name = ' '
				this.form.phone = ' '
				this.form.email = ' '
				this.form.depart = ' '
				this.form.tele_type = ' '
				this.form.company = ' '

			},
			//修改
			editStuData(row) {
				row = row || {}
				this.title = row.
				this.dialogVisible = true
				this.form = row
			},
			//保存
			saveData() {
				var title = this.title
				var name = this.form.name
				var phone = this.form.phone
				var email = this.form.email
				var depart = this.form.depart
				var tele_type = this.form.tele_type
				var company = this.form.company
				if (this.form.name == ' ') {
					this.$message('请输入姓名');
				} else {
					if (title == '新建通讯信息') {
						this.tableData.push({
							name,
							phone,
							email,
							depart,
							tele_type,
							company
						})
						this.dialogVisible = false
					} else {
						var tableData = this.tableData
						for (var i = 0; i < tableData.length; i++) {
							if (name == tableData[i].name) {
								tableData[i].phone = phone
								tableData[i].email = email
								tableData[i].depart = depart
								tableData[i].tele_type = tele_type
								tableData[i].company = company

							}
							this.dialogVisible = false
						}
					}
				}
			},

			//删除通讯录

			deleteTele() {
				this.$confirm("永久删除这个用户, 是否继续?").then(() => {
					if (this.$refs.multipleTable.selection < 1) {
						this.$message.error("至少选择一个用户！")
					} else {
						var ids = []
						this.$refs.multipleTable.selection.forEach(item => {
							ids.push(item.id)
						})
						deleteTele(ids).then(response => {
							if (response && response.status === "success") {
								this.$message.success(response.message)
							}
						})
					}
				}).catch(() => {
					this.$message.info("已取消删除")
				})
			},
		},

	};
</script>

<style scoped>
	.path {
		float: right;
	}

	.search {
		float: right;
	}
</style>
